<template>
  <!--地表沉降历史数据-->
  <section class="content">
    <el-tabs class="setting-tabs" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="单测点" name="first">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>测点名称：
              <el-select v-model="queryPointlist" clearable placeholder="请选择" @change="selectKey">
                <el-option
                  v-for="item in queryPoint"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>时间：
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                @change="timefirst"
              ></el-date-picker>数据类型：
              <el-select v-model="typeid" clearable placeholder="全部">
                <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquire">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="24" class="bc-w">
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="chartLine"></div>
          </el-col>

          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="chartLine1"></div>
          </el-col>
        </el-col>
      </el-tab-pane>

      <el-tab-pane label="横断面" name="second">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>横断面：
              <el-select
                v-model="crossSectionlist"
                clearable
                placeholder="请选择"
                @change="crossSectionlistSelectKey"
              >
                <el-option
                  v-for="item in  crossSection"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>时间：
              <el-date-picker
                v-model="value5"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择时间段"
                :picker-options="pickerOptions3"
                @change="timeSecond"
              ></el-date-picker>数据类型：
              <el-select v-model="typeCrossid" clearable placeholder="全部">
                <el-option
                  v-for="item in typeCross"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-checkbox v-model="tCheckedByDay">按日连接绘制曲线</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquireCross">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" class="bc-w">
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="transverseSection"></div>
          </el-col>
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="transverseSection1"></div>
          </el-col>
        </el-col>
      </el-tab-pane>

      <el-tab-pane label="纵断面" name="third">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>纵断面：
              <el-select
                v-model="longitudinalSectionlist"
                clearable
                placeholder="请选择"
                @click="selectKeyLong"
              >
                <el-option
                  v-for="item in longitudinalSection"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>时间：
              <el-date-picker
                v-model="value8"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择时间段"
                :picker-options="pickerOptions4"
                @change="timeLong"
              ></el-date-picker>数据类型：
              <el-select v-model="typeLongid" placeholder="全部">
                <el-option
                  v-for="item in typeLong"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-checkbox v-model="lCheckedByDay">按日连接绘制曲线</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquireLong">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="24" class="bc-w">
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="longitudinalSections"></div>
          </el-col>
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="longitudinalSections1"></div>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>
<script>
import echarts from "echarts";

export default {
  data() {
    return {
      trDateMin:null,
      trDateMax:null,
      lgDateMin:null,
      lgDateMax:null,
      projectId: "",
      activeName: "first",
      queryPointlist: null,
      crossSectionlist: null,
      longitudinalSectionlist: null,
      firstTime: [],
      type: [{ id: 1, name: "设备数据" }, { id: 2, name: "人工数据" }],
      typeCross: [{ id: 1, name: "设备数据" }, { id: 2, name: "人工数据" }],
      typeLong: [{ id: 1, name: "设备数据" }, { id: 2, name: "人工数据" }],
      typeid: "",
      typeCrossid: "",
      typeLongid: "",
      xAxis: [],
      series: [],
      transverseSectionxAxis: {
        min: Date.now() - 3600 * 1000 * 24 * 30,
        max: Date.now(),
        type: "value"
      },
      transverseSectionseries: [],
      transverseSectionseries1: [],
      longitudinalSectionsxAxis: {
        min: Date.now() - 3600 * 1000 * 24 * 30,
        max: Date.now(),
        type: "value"
      },
      longitudinalSectionsseries: [],
      longitudinalSectionsseries1: [],
      value2: [],
      value5: [],
      value8: [],
      queryPoint: [],
      crossSection: [],
      longitudinalSection: [],
      options1: [],
      tCheckedByDay: false,
      lCheckedByDay: false,
      chartLine: null,
      chartLine1: null,
      transverseSection: null,
      transverseSection1: null,
      longitudinalSections: null,
      longitudinalSections1: null,
      pickerOptions2: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      pickerOptions3: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      pickerOptions4: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      var _this = this;

      if (tab.name == "second" && !_this.secondTabInit) {
        setTimeout(function() {
          _this.transverseSection.resize();
          _this.transverseSection1.resize();
        }, 200);
        _this.secondTabInit = true;
      } else if (tab.name == "third" && !_this.thirdTabInit) {
        setTimeout(function() {
          _this.longitudinalSections.resize();
          _this.longitudinalSections1.resize();
        }, 200);
        _this.thirdTabInit = true;
      }
    },
    timefirst(t) {
      this.value2 = t;
    },
    timeSecond(t) {
      this.value5 = t;
    },
    timeLong(t) {
      this.value8 = t;
    },
    selectKey(id) {
      if (id != null) {
        var date = this.queryPoint.find(item => {
          var date = item.newData.date;
          if (date === null) {
            return;
          } else {
            if (item.id === id) {
              var d = moment(date, "YYYY-MM-DD HH:mm:ss");
              this.value2 = [
                moment(d)
                  .subtract(1, "months")
                  .format("YYYY-MM-DD"),
                moment(d).format("YYYY-MM-DD")
              ];
            }
          }
        });
      }
    },
    crossSectionlistSelectKey(id) {},
    selectKeyLong(id) {},

    inquire() {
      let data = {
        id: this.queryPointlist,
        beginDate: this.value2[0],
        endDate: this.value2[1],
        type: this.typeid
      };

      this.projectModel
        .collectData(data)
        .then(res => {
          this.xAxis = res.data.xAxis;
          this.series = res.data.series;
          this.drawCharts();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    inquireCross() {
      if (
        this.crossSectionlist != null &&
        this.value5[0] != undefined &&
        this.value5[1]
      ) {
        let data = {
          projectId: this.projectId,
          beginDate: this.value5[0],
          endDate: this.value5[1],
          type: this.typeCrossid,
          monitorItemId: "8",
          groupId: this.crossSectionlist,
          resultType: this.tCheckedByDay ? 2 : 1
        };
       
        this.projectModel
          .collectData(data)
          .then(res => {
            
            this.transverseSectionxAxis = res.data.xAxis;
            this.transverseSectionseries = res.data.series;
            this.transverseSectionseries1 = res.data.series;
            if (this.transverseSectionxAxis.type == "value") {
                  this.trDateMin = moment(this.transverseSectionxAxis.min).format("YYYY-MM-DD")
                  this.trDateMax = moment(this.transverseSectionxAxis.max).format("YYYY-MM-DD")
                }else{
                  this.trDateMin = this.transverseSectionxAxis.data[0]
                  this.trDateMax = this.transverseSectionxAxis.data[this.transverseSectionxAxis.data.length-1]
                }
            this.drawCharts();
          })
          .catch(err => {});
      } else {
      }
    },
    inquireLong() {
      if (
        this.longitudinalSectionlist != null &&
        this.value8[0] != undefined &&
        this.value8[1]
      ) {
        let collect1 = {
          projectId: this.projectId,
          beginDate: this.value8[0],
          endDate: this.value8[1],
          type: this.typeLongid,
          monitorItemId: "8",
          groupId: this.longitudinalSectionlist,
          resultType: this.lCheckedByDay ? 2 : 1
        };
        this.projectModel
          .collectData(collect1)
          .then(res => {
            this.longitudinalSectionsxAxis = res.data.xAxis;
            this.longitudinalSectionsseries = res.data.series;
            this.longitudinalSectionsseries1 = res.data.series;
            if (this.longitudinalSectionsxAxis.type == "value") {
                this.lgDateMin = moment(this.longitudinalSectionsxAxis.min).format("YYYY-MM-DD")
                this.lgDateMax = moment(this.longitudinalSectionsxAxis.max).format("YYYY-MM-DD")
              }else{
                this.lgDateMin = this.longitudinalSectionsxAxis.data[0]
                this.lgDateMax = this.longitudinalSectionsxAxis.data[this.longitudinalSectionsxAxis.data.length-1]
              }
            this.drawCharts();
          })
          .catch(err => {
            console.log(err.message);
          });
      }
    },
    drawLineChart() {
      //沉降曲线图
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      //沉降速率图
      this.chartLine1 = echarts.init(document.getElementById("chartLine1"));
      //横断面曲线图
      this.transverseSection = echarts.init(
        document.getElementById("transverseSection")
      );
      //横断面沉降速率图
      this.transverseSection1 = echarts.init(
        document.getElementById("transverseSection1")
      );
      //纵断面曲线图
      this.longitudinalSections = echarts.init(
        document.getElementById("longitudinalSections")
      );
      //纵断面沉降速率图
      this.longitudinalSections1 = echarts.init(
        document.getElementById("longitudinalSections1")
      );

      var _this = this;
      this.chartLine.setOption(
        {
          title: {
            text:
              this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1] +
              "  " +
              _this.series[0].name +"  "+
              "沉降曲线图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: false,
              data: _this.xAxis.data
            }
          ],
          yAxis: [
            {
              name: `
              
              累计变化量(mm)
              
              `,
              type: "value",
              nameLocation: "middle",
              boundaryGap: false
            }
          ],
          series: [
            {
              type: "line",
              data: _this.series[0].value,
              smooth: false
            }
          ]
        },
        true
      );

      this.chartLine1.setOption(
        {
          title: {
            text:
              this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1] +
              "  " +
              _this.series[0].name +"  "+
              "沉降速率图",
            left: "center",
            subtextStyle: {
              fontSize: 15
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              _this.transverseSectionxAxis.type == "value" ? function(params) {
                    return (
                      moment(params[0].axisValue).format("YYYY-MM-DD") + "<br/>" 
                       + params[0].data
                    );
                  }
                : undefined
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: true,
              data: _this.xAxis.data
            }
          ],
          yAxis: [
            {
              name: `
              
              变形速率控制值(mm/d)
              
              `,
              type: "value",
              nameLocation: "middle"
            }
          ],

          series: [
            {
              type: "scatter",
              data: _this.series[0].velocity,
              smooth: false,
            //   markLine: {
            //     data: [
            //       [{ name: '标线1起点', xAxis: 0, yAxis: 300, symbol: 'circle'},
            //       { name: '标线1终点', xAxis: -1|MAXNUMBER, yAxis: 300, symbol: 'circle' },
            //       ]
            //     ],
            // lineStyle: {
            //   normal: {
            //     type: 'solid',
            //     color: 'red',
            //   },
            // },
            //   },
              }      
          ]
        },
        3000
      );

      var series1 = [];
      var names = [];
      for (var i = 0; i < _this.transverseSectionseries.length; i++) {
        series1.push({
          name: _this.transverseSectionseries[i].name,
          type: "line",
          data: _this.transverseSectionseries[i].value,
          smooth: false
        });
        names.push(_this.transverseSectionseries[i].name);
      }
      this.transverseSection.setOption(
        {
          title: {
            text:this.trDateMin+ "至" + this.trDateMax + "横断面曲线图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              _this.transverseSectionxAxis.type == "value"
                ? function(params) {                                    
                      var res = moment(params[0].data[0]).format("YYYY-MM-DD") +"<br/>"
                      for (let i = 0; i < params.length; i++) {
                       res += params[i].seriesName + " : " +params[i].data[1]+"<br/>" 
                      }
                    return res;
                  }
                : undefined
          },
          legend: {            
            // y: "bottom",
            top: 20,
            data: names
          },
          //  gird:{
          //   x:0,
          //   y:0,
          //   width:'100%',
          //   height:'100%'
          // },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
            日期`,
              nameLocation: "middle",
              min: _this.transverseSectionxAxis.min,
              max: _this.transverseSectionxAxis.max,
              type: _this.transverseSectionxAxis.type,
              boundaryGap: true,
              data: _this.transverseSectionxAxis.data,
              axisLabel: {
                formatter: function(value) {
                  if (_this.transverseSectionxAxis.type == "value")
                    return moment(value).format("YYYY-MM-DD");
                  else return value;
                }
              }
            }
          ],
          yAxis: [
            {
              name: `
              
              累计变化量(mm)
              
              `,
              type: "value",
              nameLocation: "middle"
            }
          ],
          series:series1
        },
        true
      );

      var series2 = [];
      for (var i = 0; i < _this.transverseSectionseries1.length; i++) {
        series2.push({
          name: _this.transverseSectionseries1[i].name,
          type: "scatter",
          data: _this.transverseSectionseries1[i].velocity,
          smooth: false
        });
      }

      this.transverseSection1.setOption(
        {
          title: {
            text:
              this.transverseSectionxAxis.data[0] +
              "至" +
              this.transverseSectionxAxis.data[this.transverseSectionxAxis.data.length-1] +
              "横断面沉降速率图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              _this.transverseSectionxAxis.type == "value"
               ? function(params) {
                    var res = moment(params[0].data[0]).format("YYYY-MM-DD") +"<br/>"
                      for (let i = 0; i < params.length; i++) {
                       res += params[i].seriesName + " : " +params[i].data[1]+"<br/>" 
                      }
                    return res;
                  }
                : undefined
          },
          legend: {
            top: 20,
            data: names
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
            日期`,
              nameLocation: "middle",
              min: _this.transverseSectionxAxis.min,
              max: _this.transverseSectionxAxis.max,
              type: _this.transverseSectionxAxis.type,
              boundaryGap: true,
              data: _this.transverseSectionxAxis.data,
              axisLabel: {
                formatter: function(value) {
                  if (_this.transverseSectionxAxis.type == "value")
                    return moment(value).format("YYYY-MM-DD");
                  else return value;
                }
              }
            }
          ],
          yAxis: [
            {
              name: `
              
              变形速率控制值(mm/d)
              
              `,
              type: "value",
              nameLocation: "middle"
            }
          ],
          series: series2
        },
        true
      );

      var series3 = [];
      var names3 = [];
      for (var i = 0; i < _this.longitudinalSectionsseries.length; i++) {
        series3.push({
          name: _this.longitudinalSectionsseries[i].name,
          type: "line",
          data: _this.longitudinalSectionsseries[i].value,
          smooth: false
        });
        names3.push(_this.longitudinalSectionsseries[i].name);
      }
      this.longitudinalSections.setOption(
        {
          title: {
            text: this.lgDateMin + "至" + this.lgDateMax + "纵断面曲线图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              _this.longitudinalSectionsxAxis.type == "value" ? function(params) {
                    var res = moment(params[0].data[0]).format("YYYY-MM-DD") +"<br/>"
                      for (let i = 0; i < params.length; i++) {
                       res += params[i].seriesName + " : " +params[i].data[1]+"<br/>" 
                      }
                    return res;
                  }
                : undefined
          },
          legend: {
            top: 20,
            data: names3
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
            日期`,
              nameLocation: "middle",
              min: _this.longitudinalSectionsxAxis.min,
              max: _this.longitudinalSectionsxAxis.max,
              type: _this.longitudinalSectionsxAxis.type,
              boundaryGap: true,
              data: _this.longitudinalSectionsxAxis.data,
              axisLabel: {
                formatter: function(value) {
                  if (_this.longitudinalSectionsxAxis.type == "value"){
                    return moment(value).format("YYYY-MM-DD");
                  }
                  else{
                    return value;
                  } 
                }
              }
            }
          ],
          yAxis: [
            {
              name: `
              
              累计变化量(mm)
              
              `,
              type: "value",
              nameLocation: "middle"
            }
          ],
          series: series3
        },
        true
      );

      var series4 = [];
      for (var i = 0; i < _this.longitudinalSectionsseries1.length; i++) {
        series4.push({
          name: _this.longitudinalSectionsseries1[i].name,
          type: "scatter",
          data: _this.longitudinalSectionsseries1[i].velocity,
          smooth: false
        });
      }

      this.longitudinalSections1.setOption(
        {
          title: {
            text:
              this.longitudinalSectionsxAxis.data[0] +
              "至" +
              this.longitudinalSectionsxAxis.data[this.longitudinalSectionsxAxis.data.length-1] +
              "纵断面沉降速率图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              _this.longitudinalSectionsxAxis.type == "value" ? function(params) {
                    var res = moment(params[0].data[0]).format("YYYY-MM-DD") +"<br/>"
                      for (let i = 0; i < params.length; i++) {
                       res += params[i].seriesName + " : " +params[i].data[1]+"<br/>" 
                      }
                    return res;
                  }
                : undefined
          },
          legend: {
            top: 20,
            data: names3
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
            日期`,
              nameLocation: "middle",
              min: _this.longitudinalSectionsxAxis.min,
              max: _this.longitudinalSectionsxAxis.max,
              type: _this.longitudinalSectionsxAxis.type,
              boundaryGap: true,
              data: _this.longitudinalSectionsxAxis.data,
              axisLabel: {
                formatter: function(value) {
                  if (_this.transverseSectionxAxis.type == "value")
                    return moment(value).format("YYYY-MM-DD");
                  else  return value;
                   
                }
              }
            }
          ],
          yAxis: [
            {
              name: `
              
              变形速率控制值(mm/d)
              
              `,
              type: "value",
              nameLocation: "middle",
            }
          ],
          series: series4
        },
        true
      );
    },
    drawCharts() {
      this.drawLineChart();
    },
    date() {
      const end = new Date();
      var seperator1 = "-";
      var year = end.getFullYear();
      var month = end.getMonth() + 1;
      var strDate = end.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      var endDate = year + seperator1 + month + seperator1 + strDate;

      const start = new Date();
      var startYear = start.getFullYear() - 5;
      var startMonth = start.getMonth() + 1;
      var startDate = start.getDate();
      if (startMonth >= 1 && startMonth <= 9) {
        startMonth = "0" + startMonth;
      }
      if (startDate >= 0 && startDate <= 9) {
        startDate = "0" + startDate;
      }
      var startDat =
        startYear + seperator1 + startMonth + seperator1 + startDate;
      this.value2 = [startDat, endDate];
      this.value5 = [startDat, endDate];
      this.value8 = [startDat, endDate];
    },
   
  },
  mounted() {

    this.projectId = this.$route.query.projectId;
    this.date();
    let data = {
      projectId: this.projectId,
      monitorItemId: "8",
      resultType: "3"
    };

    this.projectModel
      .queryPoint(data)
      .then(res => {
        this.queryPoint = res.data;

        if (this.queryPoint.length > 0) {
          this.queryPointlist = this.queryPoint[0].id;
          this.inquire();
        }
      })
      .catch(err => {
        console.log(err.message);
      });

    let landSubsidenceProfileData = {
      projectId: this.projectId,
      monitorItemId: 14,
      recursion: 1,
      parentId: -1
    };
    this.projectModel
      .querylandSubsidenceProfile(landSubsidenceProfileData)
      .then(res => {
        this.crossSection = res.data.list;
        if (this.crossSection.length > 0) {
          this.crossSectionlist = this.crossSection[0].id;
          this.inquireCross();
        }
      })
      .catch(err => {
        console.log(err.message);
      });

    let longitudinalsectionData = {
      projectId: this.projectId,
      monitorItemId: 15,
      recursion: 1,
      parentId: -1
    };
    this.projectModel
      .querylandSubsidenceProfile(longitudinalsectionData)
      .then(res => {
        this.longitudinalSection = res.data.list;
        if (this.longitudinalSection.length > 0) {
          this.longitudinalSectionlist = this.longitudinalSection[0].id;
          this.inquireLong();
        }
      })
      .catch(err => {
        console.log(err.message);
      });
  },
  
};
</script>
<style>
.setting-tabs {
  height: 100%;
}

.setting-tabs > .el-tabs__content {
  height: calc(100% - 55px);
}
.setting-tabs > .el-tabs__content > .el-tab-pane {
  height: 100%;
}
</style>

<style scoped>
.content {
  padding-top: 10px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w {
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px;
}
.chart-plane {
  height: 100%;
}
.chartLine {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}
</style>

<style>
.el-tabs__nav {
  text-align: left;
  margin-left: 20px;
}
.el-tabs__active-bar {
  left: 0;
}
</style>
